<template>
  <el-button>CDK 兑换</el-button>
  <el-button type="primary" @click="goPage('/user/editProfile')">修改个人信息</el-button>
  <el-descriptions
      title="用户基本信息"

      :column="1"
      border
  >
    <el-descriptions-item label="用户名">{{info.username}}</el-descriptions-item>
    <el-descriptions-item label="游戏ID">{{info.nickname}}</el-descriptions-item>
    <el-descriptions-item label="QQ号码">{{info.qq}}<b v-if="info.isBindQq">已绑定</b> <b v-else class="f">未绑定</b></el-descriptions-item>
    <el-descriptions-item label="氏族">{{info.team}}</el-descriptions-item>
    <el-descriptions-item label="性别">{{info.sex}}</el-descriptions-item>
    <el-descriptions-item label="当前积分">{{info.integral}}</el-descriptions-item>
    <el-descriptions-item label="本月已用积分">{{info.useIntegral}}</el-descriptions-item>
    <el-descriptions-item label="每月积分上限">{{info.residue}}</el-descriptions-item>
  </el-descriptions>

  <el-descriptions
      class="margin-top"
      title="捐献资源统计"
      :column="2"
  >
    <el-descriptions-item label="捐献总积分" :span="24">{{data.totalIntegral}}</el-descriptions-item>
    <el-descriptions-item v-for="(item,index) in data.resource" :key="index" :label="item.name">{{item.total}}</el-descriptions-item>

  </el-descriptions>
</template>

<script>
import {reactive, toRefs} from "@vue/reactivity";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import {GET, POST} from "../../utils/Request";
import {onMounted} from "@vue/runtime-core";

export default {
  name: "Profile",
  setup(){
    const store = useStore();
    const router = useRouter()
    const state = reactive({
      info : store.getters['user/userInfo'],
      data:[]
    })
    const methods = {
      goPage(url){
        router.push(url)
      },
      async getProfileDonateLogs(){
        let resp = await GET('/user/getProfileDonateLogs')
        state.data = resp.data
      },
      async getProfile(){
        if(state.info !== undefined || {}){
          let resp = await POST("/user/getUserInfo");
          state.info = resp.data.userInfo
        }
      }
    }
    onMounted(()=>{
      methods.getProfileDonateLogs()
      methods.getProfile();
    })
    return {
      ...toRefs(state),
      ...methods
    }
  }
}
</script>

<style scoped>
b{
  font-size: 12px;
  background: #fff;
  padding: 5px 10px;
  margin: 0 5px;
  border-radius: 4px;
  background: var(--el-color-primary-light-3);
  color: #ffffff;
}
.f{
  background: #ffffff;
  color: #333333;
}
</style>